// 首页 - 推荐套餐
.recommend {
  .content {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: 1fr 1fr;
    .recommend-item {
      font-size: $font-size-xxs;
      margin-bottom: 15px;
      padding: 0;
      @include is-flex(column, stretch, flex-start, nowrap);
      .item-img-content {
        width: 100%;
        // height: 200px;
        margin-bottom: 10px;
        .item-img {
          width: 100%;
          height: 100%;
          border-radius: 5px 5px 0 0;
        }
      }
      .item-content {
        width: 100%;
        padding: 0px 7px 10px 7px;
        .tag-list {
          @include is-flex(row, flex-start, center, wrap);
          .tag {
            color: $gold;
            border: 1px solid $gold;
            margin: 0 5px 5px 0;
            padding: 2px;
            border-radius: 2px;
            font-size: $font-size-xxs;
          }
        }
        .item-title {
          font-size: $font-size-base;
          padding: 3px 0 5px 0;
        }
      }
    }
  }
}

// 会员充值 - 弹窗
.tui-modal {
  .tui-modal-custom {
    .tui-title-content {
      @include border-bottom;
      text-align: center;
      color: $color-primary-text;
      position: relative;
      padding: 15px 0;

      .tui-icon-close {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: 10px;
      }
    }

    .content {
      padding: 15px;
      @include is-flex(column, stretch, flex-start, nowrap);
      .input-box {
        width: 100%;
        margin-bottom: 15px;
        .input-title {
          color: $color-primary-grey-text;
          font-size: $font-size-xs;
          margin-bottom: 10px;
        }

        .tui-modal-input {
          width: 100%;
          border-radius: 2px;
          height: 45px;
          background-color: #282f47;
          // margin: 10px 0 15px 0;
          padding-left: 5px;
          font-size: $font-size-xs;
        }

        .tui-hidden-input {
          /* #ifdef MP-WEIXIN */
          width: 0;
          /* #endif */
        }

        .input-group {
          background-color: #282f47;
          @include is-flex(row, space-between, center, nowrap);
          .tui-modal-input {
            flex: 1;
          }
          .btn {
            white-space: nowrap;
            padding: 0 15px;
            text-align: center;
            height: 100%;
            display: block;
            border-left: 1px solid $color-primary-bg;
            font-size: $font-size-xs;
            color: $gold;
          }
        }
      }

      ::v-deep .tui-btn {
        width: 100%;
      }
    }
  }
}

// modal form
.form-item {
  @include is-flex(column, center, strength, nowrap);
  margin-bottom: 5px;
  .input-title {
    color: #c8cee1;
    font-size: $font-size-xs;
  }
  .input-item {
    @include is-flex(row, space-between, center, nowrap);
    background-color: #282f47;
    padding: 10px;
    margin: 10px 0;
    border-radius: 2px;
    height: 43px;
    line-height: 43px;
    .thorui-phcolor {
      color: #6a78a3;
    }
  }

  .tui-btn-transparent {
    background-color: transparent !important;
    color: $color-primary-title;
  }
}

.line-border {
  width: 1px;
  height: 18px;
  margin-right: 5px;
  background-color: $color-primary-bg;
}

// 按钮默认样式
.my-button {
  width: 46%;
  height: 80rpx;
  line-height: 80rpx;
  position: relative;
  border-radius: 10rpx;
  font-size: 30rpx;
  overflow: visible;
  margin-left: 0;
  margin-right: 0;
  background: $gold;
}

// 段落标题
.section-title {
  background: $color-primary-bg;
  color: $color-primary-grey-text;
  font-size: $font-size-xs;
  font-weight: bold;
  width: 100%;
  padding: 4px 15px;
}
